<template>
	<!-- 个人信息 -->
	<view class="content">
		<view class="img_text">
			头　像：
			<view class="uni-uploader-body img_box ">
				<view class="uni-uploader__files label-title">
					<block>
						<view class="uni-uploader__file head_img">
							<lazyImage :realSrc="url" :img_urls="[url]"></lazyImage>
						</view>
					</block>
				</view>
			</view>
			<i class='iconfont iconjiantou' @tap="chooseImage"></i>
		</view>
		<view class="line"></view>

		<label class="container-flex-row label-title">
			姓　名：<input type="text" v-model="user_name" class="input" />
		</label>
		<view class="line"></view>

		<label class="container-flex-row label-title">
			账　号：<input type="text" v-model="user_number" disabled class="input" />
		</label>
		<view class="line"></view>

		<label class="container-flex-row label-title" for="picxbxbxb">
			性　别：<input disabled="fales" :value="sextext[sexid]" class="input" placeholder="请输入您的性别" />
			<picker id="picxbxbxb" @change="bindPickerChangeSex" :value="sexid" :range="sextext" class="xuanzhan">
				<i class="iconfont iconjiantou"></i>
			</picker>
		</label>

		<label class="container-flex-row label-title space">
			地　区：<input disabled="fales" :value="pickerText" class="input" placeholder="选择地区" /><i @click="showMulLinkageThreePicker"
			 class="iconfont iconjiantou"></i>
		</label>
		<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault"
		 @onCancel="onCancel" @onConfirm="onConfirm"></mpvue-city-picker>
		<!-- <input type="number" v-model="user_phone" class="input" /> -->
		</label>
		<view class="line"></view>
		<label class="container-flex-row label-title">
			邮　箱：
			<!-- TODO： 可用正则表达式来判断用户是否输入的是合格的邮箱 -->
			<input type="text" v-model="user_email" class="input" />
		</label>
		<view class="line"></view>
		<label class="container-flex-row label-title">
			微　信：
			<input type="text" v-model="user_wechar" class="input" />
		</label>

		<view class="line"></view>

		<!-- UI说这个暂时去掉 -->
		<!-- <label class="container-flex-row label-title">
			职　业：<input disabled="fales" :value="pickerText" class="input" placeholder="个体营业" /><i @click="showMulLinkageThreePicker"
			 class="iconfont iconjiantou"></i>
		</label>
		<view class="line"></view> -->

		<label class="container-flex-row-qr label-title space" @tap.stop="QRcode">
			<view class="erweima">我的二维码</view>
			<view class="qr-content">
				<i class='iconfont iconerweima' style="color: #999999; font-size: 40upx"></i>
				<i class='iconfont iconjiantou' style="color: #999999; font-size: 40upx"></i>
			</view>
		</label>

		<view class="tijiao" @tap="submit">完成修改</view>
	</view>
</template>
<script>
	import Checker from '@/common/graceChecker.js'; // 引入检查数据工具
	import mpvuePicker from '@/components/mpvue-picker/mpvuePicker.vue'; // 组件插件
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'
	import provinceData from '@/components/mpvue-citypicker/city-data/province.js'; // 引入省 的数据
	import cityData from '@/components/mpvue-citypicker/city-data/city.js'; // 引入市的数据
	import areaData from '@/components/mpvue-citypicker/city-data/area.js'; // 引入区域的数据
	import uploadUrl from '@/common/config.js';
	import lazyImage from '@/components/lazy-image.vue';
	var sourceType = [
		['camera'],
		['album'],
		['camera', 'album']
	]
	var sizeType = [
		['compressed'],
		['original'],
		['compressed', 'original']
	]
	export default {
		components: {
			mpvuePicker,
			mpvueCityPicker,
			lazyImage
		},
		data() {
			const currentDate = this.getDate({
				format: true
			});
			return {
				sourceType: ['拍照', '相册', '拍照或相册'],
				sizeType: ['压缩', '原图', '压缩或原图'],
				sourceTypeIndex: 2,
				sizeTypeIndex: 2,
				user_name: '', // 用户名字
				user_number: '', // 用户账号
				user_phone: '', // 用户电话
				user_email: '', // 用户邮箱
				user_wechar: '', // 用户微信
				number: '', //学号
				sexid: 1, // 用来判断性别的索引
				index: 0,
				sextext: ['女', '男'],
				imageList: [], // TODO: 没有关联
				url: this.defimg, // 头像地址
				is_show: true,
				school: '',
				from: '',
				themeColor: '#007AFF',
				cityPickerValueDefault: [0, 0, 1],
				pickerText: '', // 最终存储全地区名称
				provinec_id: '', // 省 id
				city_id: '', // 城市 id
				area_id: '', // 区域id
			};
		},
		onLoad: function(e) {
			this.from = e.from;
			// 进行请求[获取用户资料]
			this.$zapi.apiPost('user/currency.basic/GetUserInfo').then(res => {
				// console.log(res);
				if (res.data.code == 200) {
					var data = res.data.data;
					this.url = data.avatar == "" ? this.url : data.avatar; //头像
					this.user_name = data.nicheng; // 姓名
					this.user_email = data.email == null || data.email ? '' : data.email
					this.user_wechar = data.wechat == null || data.wechat ? '' : data.wechat
					this.user_number = data.username; //账号
					this.provinec_id = data.provinec_id; //省
					this.city_id = data.city_id; //市
					this.area_id = data.area_id; //区
					var sex = data.sex; //性别
					if (sex == 2 || sex == '') {
						this.sexid = 0
					}
					this.request(); // 触发地区
				}
			});
		},
		methods: {
			// 性别
			bindPickerChangeSex: function(e) {
				this.sexid = e.target.value;
			},
			// 三级联动选择
			showMulLinkageThreePicker() {
				this.$refs.mpvueCityPicker.show()
			},
			// 触发选择地区
			onConfirm(e) {
				this.pickerText = e.label; // 获取用户所选择全称地区
				this.provinec_id = e.provinec_id;
				this.city_id = e.cityCode;
				this.area_id = e.area_id;
				// this.getSchool();  // 触发学校列表
			},

			// 地区
			request() {
				// TODO: onConfirm e传递进来就已经城市进行渲染了.为什么还要在这里再次添加this.pickerText
				// 是否可以去这下面这些代码。
				//查询省份
				var label = ''
				for (var _code in provinceData) {
					// 将我们存储的省份id 与 引入进来的省份id进行匹配。如果是有 则 就进行存储
					if (Number(provinceData[_code].value) === Number(this.provinec_id)) {
						label = provinceData[_code].label;
					}
				}
				//查询 城市
				var city_label = ''
				for (var i in cityData) {
					for (var k in cityData[i]) {
						// 将我们存储的城市id 与 引入进来的城市id进行匹配。如果是有 则 就进行存储
						if (Number(cityData[i][k].value) === Number(this.city_id)) {
							city_label = cityData[i][k].label;
						}
					}
				}
				//查询 区域/县
				var area_label = ''
				for (var i in areaData) {
					for (var k in areaData[i]) {
						for (var j in areaData[i][k]) {
							// 将我们存储的区域id 与 引入进来的区域id进行匹配。如果是有 则 就进行存储
							if (Number(areaData[i][k][j].value) === Number(this.area_id)) {
								area_label = areaData[i][k][j].label;
							}
						}
					}
				}
				// 最后进行累加 则就会显示到视图中
				this.pickerText = label + city_label + area_label;
			},

			// 完成修改
			submit: function() {
				var sex = '';
				if (this.sexid == 0) {
					sex = 2;
				} else {
					sex = 1;
				}
				var data = {
					avatar: this.url,
					nicheng: this.user_name,
					sex: sex,
					provinec_id: this.provinec_id,
					city_id: this.city_id,
					area_id: this.area_id,
					wechat: this.user_wechar,
					email: this.user_email
				};
				this.$zapi.apiPost('user/currency.basic/UpdateBasic', data).then(res => {
					// TODO: 这里暂时理解为400 就是表示用户什么都没有输入就点击完成修改，此时直接跳转tabber
					if (res.data.code == 400) {
						uni.switchTab({
							url: './index',
							success: function(e) {
								var page = getCurrentPages().pop();
								if (page == undefined || page == null) return;
								page.onLoad();
							}
						});
					}
					if (res.data.code == 200) {
						this.$zapi.apiPost('user/currency.basic/GetUserInfo').then(res => {
							uni.setStorageSync('userInfo', res.data.data);
						})
						uni.showToast({
							title: '修改成功',
							duration: 1500
						});
						// 配合动画1500毫秒后才跳转
						let switchtab = function() {
							uni.switchTab({
								url: './index',
								success: function(e) {
									var page = getCurrentPages().pop();
									if (page == undefined || page == null) return;
									page.onLoad();
								}
							})
						}
						setTimeout(switchtab, 1500)
					}
				});
			},
			// 选择头像
			chooseImage: function() {
				var _this = this;
				uni.chooseImage({
					count: 1, //默认9
					sourceType: sourceType[this.sourceTypeIndex],
					sizeType: sizeType[this.sizeTypeIndex],
					success: function(res) {
						_this.$zapi.apifile('user/currency.basic/UploadUserImg', {
							file: res.tempFilePaths[0]
						}).then(res => {
							var result = JSON.parse(res.data);
							if (result.code == 200) {
								_this.url = result.data.visit_path;
							} else {
								uni.showToast({
									title: '上传失败,请重新上传',
									icon: 'none'
								})
							}
						});
					}
				});
			},
			getDate(type) {},
			QRcode() {
				uni.navigateTo({
					url: './QR-code'
				})
			},
			onCancel(e) {}
		}
	};
</script>

<style>
	page {
		background-color: #F7F7F7;
	}

	.mpvue-picker__action {
		color: #2EB42D !important;
		font-size: 34upx;
	}

	.mpvue-picker__action:first-child {
		color: #999999 !important;
	}

	.content {
		font-size: 30upx;
		background: #F7F7F7;
		width: 100%;
		position: absolute;
	}

	.head_img {
		width: 80upx !important;
		height: 80upx !important;
	}

	.img_show {
		display: none;
	}

	.head_img image {
		width: 60upx;
		height: 60upx;
	}

	.img_text {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 15upx 25upx;
		line-height: 100upx;
		background: #ffffff;
		font-size: 34upx;
		color: #333333;
	}

	.img_box {
		margin-top: 0upx !important;
		height: 80upx;
		background: #ffffff;
	}

	.iconjiantou {
		font-size: 40upx;
		height: 90upx;
		line-height: 90upx;
	}

	.iconjiantou:before {
		position: absolute;
		right: 10px;
		color: #CCCCCC;
	}

	.container-flex-row {
		display: flex;
		flex-direction: row;
		align-items: center;
		background: #ffffff;
	}

	.container-flex-row-qr {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		background: #ffffff;
		padding-right: 25upx;
	}

	.qr-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 90upx;
	}

	.label-title {
		font-size: 34upx;
		color: #333333;
		min-height: 90upx;
		line-height: 90upx;
		padding-left: 25upx;
	}

	.erweima {
		font-size: 34upx;
		color: #333333;
		height: 90upx;
		line-height: 90upx;
	}

	.input {
		width: 70%;
	}

	.line {
		padding-left: 25upx;
		border-bottom: 1px solid #eeeeee;
	}

	.space {
		margin-top: 20upx;
	}

	.anniu {
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin-top: 40upx;
	}

	.tijiao {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 80upx;
		background-color: #FF9900;
		color: #ffffff;
		font-size: 30upx;
		margin: 30upx;
	}

	.xuanzhan {
		position: relative;
		margin-left: auto;
	}

	.xuanzhan .iconfont {
		position: absolute;
		top: -40upx;
	}
</style>
